<template>
  <div>
    <div class="info">
      <el-divider content-position="left"><h1>资料信息</h1></el-divider>
      <div class="flex">
        <div>
          <label>流水号：</label>
          <span>{{infoData.fID}}</span>
        </div>
        <div>
          <label>车牌号：</label>
          <span>{{infoData.catID}}</span>
        </div>
      </div>
    </div>
    <div class="info">
      <el-divider content-position="left"><h1>原车主头像</h1></el-divider>
      <el-image class="imgs" :src="infoData.headImg" :preview-src-list="[infoData.headImg]"></el-image>
    </div>
    <div class="info">
      <el-divider content-position="left"><h1>卖家指纹</h1></el-divider>
      <el-image v-if="infoData.fgpImg" class="imgs" :src="infoData.fgpImg" :preview-src-list="[infoData.fgpImg]"></el-image>
    </div>
    <div class="info" v-if="ifCard(['身份证','港澳台通行证'])">
      <el-divider content-position="left"><h1>身份证</h1></el-divider>
      <el-image class="imgs" :src="infoData.IDimgZ" :preview-src-list="[infoData.IDimgZ]"></el-image>
      <el-image class="imgs" :src="infoData.IDimgF" :preview-src-list="[infoData.IDimgF]"></el-image>
    </div>
    <div class="info" v-if="ifCard(['港澳台通行证'])">
      <el-divider content-position="left"><h1>港澳台通行证</h1></el-divider>
      <el-image class="imgs" :src="infoData.GAimgZ" :preview-src-list="[infoData.GAimgZ]"></el-image>
      <el-image class="imgs" :src="infoData.GAimgZ" :preview-src-list="[infoData.GAimgf]"></el-image>
    </div>
    <div class="info" v-if="ifCard(['企业营业执行照（三合一）'])">
      <el-divider content-position="left"><h1>企业营业执行照（三合一）</h1></el-divider>
      <el-image class="imgs" :src="infoData.YYimgZ" :preview-src-list="[infoData.YYimgZ]"></el-image>
    </div>
    <div class="info" v-if="ifCard(['护照'])">
      <el-divider content-position="left"><h1>护照</h1></el-divider>
      <el-image class="imgs" :src="infoData.HZOimgZ" :preview-src-list="[infoData.HZOimgZ]"></el-image>
      <el-image class="imgs" :src="infoData.HZTimgZ" :preview-src-list="[infoData.HZTimgZ]"></el-image>
      <el-image class="imgs" :src="infoData.HZFimgZ" :preview-src-list="[infoData.HZFimgZ]"></el-image>
    </div>
    <div class="info" v-if="infoData.paperCard">
      <el-divider content-position="left"><h1>行驶证</h1></el-divider>
      <el-image class="imgs" :src="infoData.XSimgZ" :preview-src-list="[infoData.XSimgZ]"></el-image>
      <el-image class="imgs" :src="infoData.XSimgF" :preview-src-list="[infoData.XSimgF]"></el-image>
    </div>
    <div class="info" v-if="infoData.paperCard">
      <el-divider content-position="left"><h1>车辆登记证书</h1></el-divider>
      <el-image class="imgs" :src="infoData.CZimgZ" :preview-src-list="[infoData.CZimgZ]"></el-image>
      <el-image class="imgs" :src="infoData.CZimgF" :preview-src-list="[infoData.CZimgF]"></el-image>
    </div>
    <div class="info" v-if="infoData.paperCard">
      <el-divider content-position="left"><h1>附件</h1></el-divider>
      <el-image
        class="imgs"
        :src="item"
        :preview-src-list="[item]"
        v-for="(item,i) in infoData.FJimg"
        :key="i"
      ></el-image>
    </div>
  </div>
</template>
<script>
import { papers } from "../views/media/data";
export default {
  props: ["infoData"],
  data() {
    return {
      paper: {},
      card: true
    };
  },
  mounted() {
    this.getPaper();
  },
  methods: {
    ifCard(arr) {
      let _this = this;
      return arr.find(v => v == _this.infoData.paperCard);
    },
    getPaper() {
      let _this = this;
      if (!_this.infoData.paperCard) {
        _this.card = false;
        return;
      }
      papers.forEach(e => {
        if (e.val == _this.infoData.paperCard) {
          _this.paper = e;
          return false;
        }
      });
      _this.card = true;
    }
  },
  watch: {
    infoData() {
      this.getPaper();
    }
  }
};
</script>

<style lang="scss" scoped>
.info {
  font-size: 16px;
  overflow: hidden;
  .flex {
      padding: 20px 0;
      overflow: hidden;
      &>div{
          width: 50%;
          float: left;
      }
  }
  label {
    font-weight: 600;
    margin: 0 10px;
  }
  span {
    color: #f56c6c;
  }
  .imgs{
      width: 200px;
      margin-left: 10px;
      margin-top: 10px;
  }
}
.el-divider__text,
.el-link {
  font-size: 18px;
}
</style>
